$(document).ready(function () {

	AOS.init()
	// 模拟数据
	const trainingData = {
		tabs: [
			{ label: "产品介绍视频", key: "all" },
			{ label: "操作说明视频", key: "live" },
			{ label: "视频直播预约", key: "video" },
		],
		videos: [
			{
				title: "同门产品基础操作培训",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "本课程将介绍同门产品的基本操作方法和注意事项",
				url: "#",
				type: "video"
			},
			{
				title: "高级功能应用直播回放",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "直播回放：讲解产品高级功能的应用场景和操作技巧",
				url: "#",
				type: "live"
			},
			{
				title: "产品维护与保养指南",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "详细介绍产品的日常维护方法和保养周期建议",
				url: "#",
				type: "manual"
			},
			{
				title: "故障排除实战培训",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "通过实际案例演示常见故障的诊断和解决方法",
				url: "#",
				type: "video"
			},
			{
				title: "最新功能更新说明会",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "介绍最新版本产品的新功能和改进点",
				url: "#",
				type: "live"
			},
			{
				title: "安全操作规范手册",
				cover: "https://img.tongmen.cdn.dgyunju.cn/15-1691724034.jpg",
				description: "产品使用过程中的安全注意事项和操作规范",
				url: "#",
				type: "manual"
			}
		],
		total: 15
	};

	// 当前状态
	const state = {
		activeTab: 0,
		page: 1,
		pageSize: 6,
		loading: false
	};

	// 初始化页面
	initPage();

	// 选项卡点击事件
	$('.tab-item').click(function () {
		const index = $(this).data('index');
		if (state.activeTab === index) return;

		$('.tab-item').removeClass('active');
		$(this).addClass('active');
		state.activeTab = index;
		state.page = 1;
		fetchVideos();
	});

	// 视频分页
	$("#radio").pagination({
		/*当前页码*/
		currentPage: 1,
		/*总共有多少页*/
		totalPage: 10,
		/*是否显示首页、尾页 true：显示 false：不显示*/
		isShow: true,
		/*分页条显示可见页码数量*/
		count: 5,
		/*第一页显示文字*/
		homePageText: '首页',
		/*最后一页显示文字*/
		endPageText: '尾页',
		/*上一页显示文字*/
		prevPageText: '<',
		/* 下一页显示文字*/
		nextPageText: '>',
		/*点击翻页绑定事件*/
		callback: function (page) {
			console.log(page);
		}
	});


	// QA分页

	$("#question").pagination({
		/*当前页码*/
		currentPage: 1,
		/*总共有多少页*/
		totalPage: 10,
		/*是否显示首页、尾页 true：显示 false：不显示*/
		isShow: true,
		/*分页条显示可见页码数量*/
		count: 5,
		/*第一页显示文字*/
		homePageText: '首页',
		/*最后一页显示文字*/
		endPageText: '尾页',
		/*上一页显示文字*/
		prevPageText: '<',
		/* 下一页显示文字*/
		nextPageText: '>',
		/*点击翻页绑定事件*/
		callback: function (page) {
			console.log(page);
		}
	});


	// 初始化页面
	function initPage () {
		fetchVideos();
		updatePagination();
	}

	// 获取视频数据
	function fetchVideos () {
		if (state.loading) return;

		state.loading = true;
		$('#loadingOverlay').show();

		setTimeout(() => {

			// 根据选项卡筛选数据
			let filteredVideos = [...trainingData.videos];
			const currentTabKey = trainingData.tabs[state.activeTab].key;

			if (currentTabKey !== 'all') {
				filteredVideos = filteredVideos.filter(video => video.type === currentTabKey);
			}

			// 分页
			const startIndex = (state.page - 1) * state.pageSize;
			const paginatedVideos = filteredVideos.slice(startIndex, startIndex + state.pageSize);

			renderVideos(paginatedVideos);
			state.loading = false;
			$('#loadingOverlay').hide();

			// 显示/隐藏空状态
			if (paginatedVideos.length === 0) {
				$('#emptyState').show();
			} else {
				$('#emptyState').hide();
			}
		}, 500);
	}

	// 渲染视频列表
	function renderVideos (videos) {
		const videoGrid = $('#videoGrid');
		videoGrid.empty();

		videos.forEach(video => {
			videoGrid.append(`
							<div class="video-card">
									<div class="video-thumbnail">
											<img src="${video.cover}" alt="${video.title}">
											<div class="video-play-icon"></div>
									</div>
									<div class="video-info">
											<h3 class="video-title">${video.title}</h3>
											<p class="video-description">${video.description}</p>
											<p class="video-description" style='color:#115899;'>了解更多>>></p>
									</div>
							</div>
					`);
		});
	}

	// 更新分页状态
	function updatePagination () {
		$('.page-link').removeClass('active');
		$(`.page-link[data-page="${state.page}"]`).addClass('active');
	}


	$('.question-title').click(function () {
		$(this).parent().toggleClass('active');
	});

	// 搜索按钮点击
	$('.primary-btn').click(function () {
		$('.loading-overlay').show();
		setTimeout(function () {
			// 模拟搜索延迟
			$('.loading-overlay').hide();
			// 这里可以添加实际搜索逻辑
		}, 500);
	});

	// 重置按钮点击
	$('.danger-btn').click(function () {
		$('.filter-select').val('-1');
		$('.search-box input').val('');
		// 这里可以添加重置逻辑
	});

	// 分页点击
	$('.pagination-link').not('.disabled').click(function (e) {
		e.preventDefault();
		$('.pagination-link').removeClass('active');
		$(this).addClass('active');
		$('.loading-overlay').show();
		setTimeout(function () {
			$('.loading-overlay').hide();
			// 这里可以添加分页逻辑
		}, 500);
	});

	// 分类选择变化
	$('.filter-select').change(function () {
		$('.loading-overlay').show();
		setTimeout(function () {
			$('.loading-overlay').hide();
			// 这里可以添加分类切换逻辑
		}, 500);
	});

	// 搜索图标点击
	$('.search-icon').click(function () {
		$('.primary-btn').click();
	});

	// 回车搜索
	$('.search-box input').keypress(function (e) {
		if (e.which === 13) {
			$('.primary-btn').click();
		}
	});
});